import { global_duration_time } from '../../DataDefine/sourceData';

const animation_objTag = 'animation_obj';

/**
 * 动画 元素 信息集 生成器
 */
export class animation_obj {
  get [Symbol.toStringTag]() {
    return animation_objTag;
  }

  constructor() {}

  /**
   * 设定 animation 的名字
   */
  set name(newVal: string) {
    this.#name = newVal;
    this.keyframeName = this.#name + '_keyframe';
  }

  /**
   * 获取 当前 animation 的名字
   */
  get name() {
    return this.#name!;
  }

  #name?: string;

  /**
   * 关键帧 名字
   */
  keyframeName?: string;

  /**
   * 关键帧 集
   */
  keyframeName_s?: string;

  /**
   * 延迟时间 单位 s
   */
  delay = 0;

  /**
   * 运动时间 单位 s
   */
  duration = global_duration_time;

  /**
   * 运动 函数
   */
  timing_function: string | Function = 'ease-in-out';

  /**
   * 最终 位置信息
   */
  fill_mode: string = 'forwards';

  /**
   * 添加 新 的 动画 帧
   */
  add_new_keyframeName(keyframe_name_arr?: string | string[]) {
    this.keyframeName_s = this.keyframeName_s || this.keyframeName;
    if (keyframe_name_arr == undefined) {
      return;
    }
    if (typeof keyframe_name_arr == 'string') {
      keyframe_name_arr = [keyframe_name_arr];
    }

    let str = keyframe_name_arr.join(',\n\t\t\t');

    this.keyframeName_s += ',\n\t\t\t' + str;
  }

  /**
   *
   *  当前 对象 的 animation 信息 字符串
   */
  toCssString() {
    this.add_new_keyframeName();
    return `animation-name: ${this.keyframeName_s};
        animation-duration: ${this.duration}s;
        animation-delay: ${this.delay}s;
        animation-timing-function: ${this.timing_function};
        animation-fill-mode: ${this.fill_mode};`;
  }
}
